import axios from "axios";
import { useEffect, useState } from "react";
import { Table, Radio ,DatePicker,Input, Button} from 'antd';
const { RangePicker } = DatePicker;
const { Search } = Input;
import XLSX from 'xlsx';
function Goodsorder() {


    const [list, setList] = useState([])
    const [total, setTotal] = useState(0)
    const [pages, setPage] = useState(1)
    const [limits, setlimit] = useState(10)
    const [orderNo,setorderNo]=useState("")
   
    const getlist = async () => {

        let { list, total, page, limit } = await axios.get("/store/order/list", {
            params: {
                status: sorder,
                dateLimit: dateLimit,
                orderNo,
                page: pages,
                limit: limits,
                type: types,
                temp: new Date().getTime(),
            }
        })

        setList(list)
        setTotal(total)
        setPage(page)
        setlimit(limit)
    }

    const [types, settype] = useState("2")
    const placementChange = (e) => {//**********************************1 tabs*/
        settype(e.target.value)
    };

    const [sorder,setsorder]=useState("all")
    const setsorderFun=(e)=>{//******************************************2tabs */
        setsorder(e.target.value)
    }

    const [dateLimit,setDateLimit]=useState(" ")
    const setDateLimitFun=(e)=>{//********************************3 */
        setDateLimit(e.target.value)
    }
    const changeTime=(m,t)=>{
         let newtime=t.join(",")
         setDateLimit(newtime)
    }

    const onSearch=(val)=>{// 这里是搜索
          console.log(val);
          setorderNo(val)
    }

    //请求
    const [orderNum,setorderNum]=useState({})
    const gettabfun = async () => {
        let res = await axios.get("/store/order/status/num", {
            params: {
                dateLimit: dateLimit,
                type: types,
                temp: new Date().getTime(),
            }
        })
        // console.log(res);
        setorderNum(res)
    }
    //表格
    const columns = [
        {
            title: '订单号',
            dataIndex: 'orderId',
            key: "orderId"
        },
        {
            title: '订单类型',
            dataIndex: 'orderType',
            key: "orderType",
        },
        {
            title: '收货人',
            dataIndex: 'realName',
            key: "realName"
        },

        {
            title: '商品信息',
            dataIndex: 'productScore',
            key: "productScore",
            width: 100,
            ellipsis:true,
            render: (_, record) => {
                // console.log(record.productList[0].info.productName);
                return (record.productList[0].info.productName)
            }

        },
        {
            title: '实际支付',
            dataIndex: 'payPrice',
            key: "payPrice"
        },
        {
            title: '支付方式',
            dataIndex: 'payTypeStr',
            key: "payTypeStr"
        },
        {
            title: '订单状态',
            dataIndex: 'statusStr',
            key: "statusStr",
            render: (_, record) => {
                // console.log(record.statusStr.value);
                return (record.statusStr.value)
            }
        },
        {
            title: '下单时间',
            dataIndex: 'createTime',
            key: "createTime"
        },
        {
            title: '操作',
            dataIndex: '',
            key: "x"
        },

    ];
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const onSelectChange = (newSelectedRowKeys) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
        selections: [
            Table.SELECTION_ALL,
            Table.SELECTION_INVERT,
            Table.SELECTION_NONE,
            {
                key: 'odd',
                text: 'Select Odd Row',
                onSelect: (changeableRowKeys) => {
                    let newSelectedRowKeys = [];
                    newSelectedRowKeys = changeableRowKeys.filter((_, index) => {
                        if (index % 2 !== 0) {
                            return false;
                        }
                        return true;
                    });
                    setSelectedRowKeys(newSelectedRowKeys);
                },
            },
            {
                key: 'even',
                text: 'Select Even Row',
                onSelect: (changeableRowKeys) => {
                    let newSelectedRowKeys = [];
                    newSelectedRowKeys = changeableRowKeys.filter((_, index) => {
                        if (index % 2 !== 0) {
                            return true;
                        }
                        return false;
                    });
                    setSelectedRowKeys(newSelectedRowKeys);
                },
            },
        ],
    };
    const onChangePage = (val, b) => {
        console.log(val, b);
        setPage(val)
        setlimit(b)
        // getList()
    }
    useEffect(() => {
        getlist()
        gettabfun()
        // limits,placement, pages,types,sorder
    }, [pages, limits, types,sorder,dateLimit,orderNo])
    
    const exportToExcel = () => {

        const data = [];
        list.map(item => {
            data.push({
                "订单号": item.orderId,
                "订单类型": item.orderType,
                "收货人": item.realName,
                "收货人": item.productList[0].info.productName,
                "支付金额": item.payPrice,
             
            })
        })

        const worksheet = XLSX.utils.json_to_sheet(data);
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
        XLSX.writeFile(workbook, "data.xlsx");
    };

    
    return (
        <div className="whitebg">
            商品订单

            <div>
                <span style={{ fontSize: "25px", }}>订单类型:</span>
                {/* 选项卡 */}
                <Radio.Group value={types} onChange={placementChange}>
                    <Radio.Button value="2">全部</Radio.Button>
                    <Radio.Button value="0">普通订单</Radio.Button>
                    <Radio.Button value="1">视频号订单</Radio.Button>
                </Radio.Group>

            </div>
            <div>
                <span style={{ fontSize: "25px", }}>订单状态:</span>
                {/* 选项卡 */}
                <Radio.Group value={sorder} onChange={setsorderFun}>
                    <Radio.Button value="all">全部{orderNum.all}</Radio.Button>
                    <Radio.Button value="unPaid">未支付{orderNum.unPaid}</Radio.Button>
                    <Radio.Button value="notShipped">未发货{orderNum.notShipped}</Radio.Button>
                    <Radio.Button value="spike">待收货{orderNum.spike}</Radio.Button>
                    <Radio.Button value="bargain">待评价{orderNum.bargain}</Radio.Button>
                    <Radio.Button value="complete">交易完成{orderNum.complete}</Radio.Button>
                    <Radio.Button value="toBeWrittenOff">待核销{orderNum.toBeWrittenOff}</Radio.Button>
                    <Radio.Button value="refunding">退款中{orderNum.refunding}</Radio.Button>
                    <Radio.Button value="refunded">已退款{orderNum.refunded}</Radio.Button>
                    <Radio.Button value="deleted">已删除{orderNum.deleted}</Radio.Button>
                </Radio.Group>

            </div>
            <div>
                <span style={{ fontSize: "25px", }}>时间选择:</span>
                {/* 选项卡 */}
                <Radio.Group value={dateLimit} onChange={setDateLimitFun}>
                    <Radio.Button value=" ">全部</Radio.Button>
                    <Radio.Button value="today">今天</Radio.Button>
                    <Radio.Button value="yesterday">昨天</Radio.Button>
                    <Radio.Button value="lately7">最近7天</Radio.Button>
                    <Radio.Button value="lately30">最近30天</Radio.Button>
                    <Radio.Button value="month">本月</Radio.Button>
                    <Radio.Button value="year">本年</Radio.Button>
                </Radio.Group>
                <RangePicker onChange={changeTime} />
            </div>
            <div>
            <Search
      placeholder="input search text"
      allowClear
      onSearch={onSearch}
      style={{
        width: 200,
      }}
    />
            </div>
            <Button type="primary" onClick={exportToExcel}>导出</Button>
            {/* 表格 */}
            <Table columns={columns} dataSource={list}
                rowSelection={rowSelection}

                rowKey="orderId"
                pagination={{
                    defaultCurrent: pages,
                    showQuickJumper:true,
                    showPrevNextJumpers:true,

                    pageSize: limits,
                    total: total,
                    pageSizeOptions: [10, 20, 50, 100],
                    onChange: onChangePage
                }}

            />
        </div>
    );
}

export default Goodsorder;